<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			body{
				background-color: black;
			}
			
			#player{
				position: absolute;
				left: 500px;
				top:200px;
			}
			#playsongshu{
				position: absolute;
				left: 500px;
				top: 400px;
			}
			#played{
				position: absolute;
				right: 500px;
				top: 200px;
			}
			#playel{
				position: absolute;
				right: 500px;
				top: 300px;
			}
			#playsongshuda{
				position: absolute;
				left: 500px;
				top: 400px;
			}
			#dazhao1{
				position: absolute;
				height: 100px;
				width: 20px;
				background-color: gold;
			}
			
		</style>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
				//为什么这样写的触发器不得行
			/* 		$("#player").bind('keypress',function(event){
					if(event.keyCode == "82"){
						$(this).attr("src","img/player2.gif");
					}
					}) 
			 */
				$(function(){
					$("#playsongshuda").hide();
					$("#dazhao1").hide();
						$("#player").dblclick(function(event){
							$(this).attr("src","img/player2.gif");
						});
						$(document).ready(function(){
						        $(document).bind('contextmenu',function(e){
						            return false;
						        });
						    })

					$("#player").mousedown(function(event){
						$(this).attr("src","img/player2.gif");
					});
					$(document).stop().click(function(event){//点击前进
						//event=window.event||event;  ?
						$("#dazhao1").hide();
						event=window.event;
						arcX = event.clientX-80;//鼠标点击的位置的
						arcY = event.clientY-60;//鼠标点击的位置
						
					/* 	arcX = event.screenX;
						arcX = event.screenY; */
						console.log(arcX);
						console.log(typeof arcX);
						//console.log($("#player").offsetLeft);
						console.log($("#player").css('left'));
						console.log(typeof $("#player").css('left'));
						console.log($("#player").css('top'));
						var X=parseInt($("#player").css('left'));
						var Y=parseInt($("#player").css('top'));//当前的照片的位置
						console.log(X);
						console.log(typeof X);
						if(X<arcX){
							$("#player").attr("src","img/player_right.gif");
						}else{
							
							$("#player").attr("src","img/player_left.gif");
						}
						let myset = setInterval(lf,"200");
						let myset2 = setInterval(rt,"200");
						
						function lf(){
							if(X<arcX){
								
								if((arcX-X)<10){
									X=X+(arcX-X);
									var XPX=X+"PX";
									clearInterval(myset);
									$("#player").stop().css({"left":XPX});
									if(X==arcX&&Y==arcY){
										$("#player").stop().attr("src","img/player_right.jpg");
									}
									
								}else{
									X=X+10;
									var XPX=X+"PX";
									console.log(XPX);
									$("#player").stop().css({"left":XPX});
									// await.sleep(1000);
								}
							}else{
								if((X-arcX)<10){
									X=X-(X-arcX);
									var XPX2=X+"PX";
									console.log(XPX2);
									$("#player").stop().css({"left":XPX2});//.attr("src","img/player_left.jpg");
									clearInterval(myset);
									if(X==arcX&&Y==arcY){
										$("#player").stop().attr("src","img/player_left.jpg");
									}
								}else{
									X=X-10;
									var XPX2=X+"PX";
									console.log(XPX2);
									$("#player").stop().css({"left":XPX2});
								}
							}
						} 
						function rt(){
							if(Y<arcY){
								
								if((arcY-Y)<10){
									Y=Y+(arcY-Y);
									var YPX=Y+"PX";
									clearInterval(myset2);
									$("#player").stop().css({"top":YPX});
									if(X==arcX&&Y==arcY){
										$("#player").stop().attr("src","img/player_right.jpg");
									}
									
								}else{
									Y=Y+10;
									var YPX=Y+"PX";
									console.log(YPX);
									$("#player").stop().css({"top":YPX});
									// await.sleep(1000);
								}
							}else{
								if((Y-arcY)<10){
									Y=Y-(Y-arcY);
									var YPX2=Y+"PX";
									console.log(YPX2);
									$("#player").css({"top":YPX2});
									clearInterval(myset2);
									if(X==arcX&&Y==arcY){
										$("#player").stop().attr("src","img/player_left.jpg");
									}
								}else{
									Y=Y-10;
									var YPX2=Y+"PX";
									console.log(YPX2);
									$("#player").stop().css({"top":YPX2});
								}
							}
						}
						
						
					//while循环导致瞬间移动
						/* while(X != arcX){
							if(X<arcX){
								
								if((arcX-X)<10){
									X=X+(arcX-X);
									$("#player").css({"left":XPX});
								}else{
									X=X+10;
									var XPX=X+"PX";
									console.log(XPX);
									$("#player").css({"left":XPX});
									// await.sleep(1000);
								}
							}else{
								if((X-arcX)<10){
									X=X-(X-arcX);
									var XPX2=X+"PX";
									console.log(XPX2);
									$("#player").css({"left":XPX2});
								}else{
									X=X-10;
									var XPX2=X+"PX";
									console.log(XPX2);
									$("#player").css({"left":XPX2});
								}
							}
						} */
						
					})	
					onkeydown=function(event){
						if(event.keyCode =="82"){
							$("#playsongshu").stop().fadeOut(200)
							setTimeout(function(){
								$("#playsongshu").stop().fadeIn(1000);
							},6000)
							$("#playsongshuda").stop().toggle(1700);
							var songshux = parseInt($("#playsongshu").css("left"))+200+"px";
							var songshuy = parseInt($("#playsongshu").css("top"))+20+"px";
							$("#playsongshuda").css({"left":songshux});
							console.log(songshux+"songshu");
							$("#playsongshuda").animate(
							{
								
								left:"+=330px"
							},
							3000
							/* ,
							setTimeout(function(){
								$("#playsongshuda").stop().hide();
							},2000) */
							
							);
							setTimeout(function(){
								$("#playsongshuda").stop().hide();
							},6300)
						}
						if(event.keyCode == "32"){//按下R键开大
							$("#player").stop().fadeOut(1000)
							setTimeout(function(){
								$("#player").attr("src","img/player2.gif").fadeIn(1000);
							},1000)
							// var songshu = parseInt($("#play"))
							}
							// $("#player").attr("src","img/player2.gif");
							var time = 3;
							console.log("199100214");
							/* var myset = setInterval(aa,"1000");
							console.log(time);
							function aa(){
								if(time<1){
									clearInterval(myset);
									$("#player").attr("src","img/player_right.jpg");
								}else{
									time--;
									console.log(time);	
								}
							} */
							if(event.keyCode == "65"){
								
								var X=parseInt($("#player").css('left'))+200+"px";
								var Y=parseInt($("#player").css('top'))+55+"px";
								$("#dazhao1").stop().toggle(500).css({"left":X,"top":Y});
								console.log(X);
								$("div").animate({
									width:"700px"
								},1500)
							
								
							}
							
							
						
					} 
					
				});
				
				</script>
	</head>
	<body>
		<img id="player" src="img/player_right.jpg" >
		<!-- <img id='played' src='img/player1_big.gif'> -->
		<img id='playel' src='img/player1_big.jpg'>
		<img id='playsongshu' src="img/player_big.jpg" />
		<img id="playsongshuda" src="img/player_big.gif"/>
		<div id = "dazhao1"></div>
	</body>
</html>
